<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="1">
            </el-col>
                <el-col :span="6">
                    <!-- 切割机格式选择 -->
                <el-card class="box-card">
                    <div class="title" style="text-align: center; font-size: 20px;">切割机格式选择</div>
                    <el-form label-width="120px" label-position="left">
                        <el-form-item label="切割机格式">
                            <el-select v-model="form.cutterFormat" placeholder="请选择" style="width: 150px;">
                                <el-option label="opt" value="opt" />
                                <!-- <el-option label="快速模式" value="fast" /> -->
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>

                <!-- 优化模式选择 -->
                <el-card class="box-card">
                    <div class="title" style="text-align: center; font-size: 20px;">优化模式选择</div>
                    <el-form label-width="120px" label-position="left">
                        <el-form-item label="形状">
                            <el-select v-model="form.shape" placeholder="请选择" style="width: 150px;">
                                <el-option label="矩形" value="rectangle" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="箱架序">
                            <el-select v-model="form.boxOrder" placeholder="请选择" style="width: 150px;">
                                <el-option label="按箱架序" value="byBox" />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="自动原片选择">
                            <el-select v-model="form.autoSelect" placeholder="请选择" style="width: 150px;">
                                <el-option label="是" value="yes" />
                                <el-option label="否" value="no" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="优先">
                            <el-select v-model="form.priority" placeholder="请选择" style="width: 150px;">
                                <el-option label="切裁率优先" value="cutRate" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>

                <!-- 余料长宽定义 -->
                <el-card class="box-card">
                    <div class="title" style="text-align: center; font-size: 20px;">余料长宽定义</div>
                    <el-form label-width="120px" label-position="left">
                        <el-form-item label="余料长">
                            <el-input v-model="form.tailLength" placeholder="请输入余料长" style="width: 150px;"  @change="handleTailLengthChange" />
                        </el-form-item>
                        <el-form-item label="余料宽">
                            <el-input v-model="form.tailWidth" placeholder="请输入余料宽" style="width: 150px;"  @change="handleTailWidthChange" />
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="6">
                <!-- 分架规则选择 -->
                <el-card class="box-card">
                    <div class="title" style="text-align: center; font-size: 20px;">分架规则选择</div>
                    <el-form label-width="160px" label-position="left">
                        <el-form-item label="分架规则">
                            <el-select v-model="form.splitRule" placeholder="请选择" style="width: 150px;" >
                                <el-option label="按箱架序" value="1" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>


                <!-- 其他设置 -->
                <el-card class="box-card">
                    <div class="title" style="text-align: center; font-size: 20px;">其他设置</div>
                    <el-form label-width="160px" label-position="left">
                        <el-form-item label="pdf文件排版规则">
                            <el-select v-model="form.pdfLayoutRule" placeholder="请选择" style="width: 150px;" @change="handlePdfLayoutRuleChange"  required>
                                <el-option label="单页单版" value="1" />
                                <el-option label="单页双版" value="2" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>

                
                <!-- 当前算法服务器地址-->
                <el-card class="box-card">
                    <div class="title" style="text-align: center; font-size: 20px;">当前算法服务器地址</div>
                    <el-form label-width="160px" label-position="left">
                        <el-form-item label="服务器地址">
                            <el-col :span="12">{{ algorithmIp }}</el-col>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import  useOrderStore  from '@/store/modules/order'
import { getAlgorithmIp } from '@/api/setting/other'
const orderStore = useOrderStore()

const form = ref({
    cutterFormat: 'opt',
    shape: '矩形',
    boxOrder: '按箱架序',
    priority: '切裁率优先',
    splitRule: '按箱架序',
    tailLength: '',
    tailWidth: '',
    pdfLayoutRule: '1'
    })

const algorithmIp = ref('127.0.0.1:8082')
const handleTailLengthChange = (value) => {
    form.value.tailLength = value
    orderStore.setTailLength(value)
}

const handleTailWidthChange = (value) => {
    form.value.tailWidth = value
    orderStore.setTailWidth(value)
}

const handlePdfLayoutRuleChange = (value) => {
    //form.value.pdfLayoutRule = value
    orderStore.setPdfLayoutRule(value)
}

onMounted(() => {
    form.value.tailLength = orderStore.tailLength || ''
    form.value.tailWidth = orderStore.tailWidth || ''
    form.value.pdfLayoutRule = orderStore.pdfLayoutRule || '1'
    getAlgorithmIp().then(response => {
        console.log(response)
        algorithmIp.value = response.data
    })
})
</script>

<style scoped>
.app-container {
    padding: 20px;
}

.box-card {
    margin-bottom: 20px;
}

.title {
    font-size: 16px;
    color: #409EFF;
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 18px;
}
</style>
